<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <asd class="demo"></asd>
</body>
<script>
    // DOM  
    // html元素的增删改查   => 获取 设置 更新 修改 元素的内容,样式

    // 节点 
    // 文档节点
    // 元素节点
    // 文本节点  
    // 属性节点
    // 注释节点
    // 所有的节点 => 对象类型

    // 节点的层级关系
    // 父节点
    // 子节点
    // 同胞节点
    // 根节点    

    // 拓展  => 快捷获取 html bodu head
    // document.documentElement 
    // document.body
    // document.head

    // document.title  获取和设置网页标题(内容)

    /* console.log(document.documentElement);   // html
    console.log(document.body);
    console.log(document.head);
    console.log(document.title);
    document.title="嘿嘿(*^▽^*)";
 */

    // 元素节点的查找
    document.getElementById()
    document.getElementsByClassName()
    document.getElementsByTagName()
    document.getElementsByName()

    document.querySelector()
    document.querySelectorAll()


    // 层级的查找

    // 父节点 父元素
    // Element.parentNode
    // Element.parentElement

    // 子节点 子元素
    // Element.childNode
    // Element.children
    
    // 第一个子节点 第一个子元素
    Element.firstChild
    Element.firstElementChild

    function first(ele){
        return ele.firstElementChild || e.firstChild;  
    }

    // 最后一个子节点 最后一个子元素
    Element.lastChild
    Element.lastElementChild

    function last(ele){
        return ele.lastElementChild || e.lastChild;  
    }

    // 前一个同胞节点 前一个同胞元素
    Element.previousSibling
    Element.previousElementSibling

    function prev(ele){
        return ele.previousElementSibling || e.previousSibling;  
    }

    // 后一个同胞节点 后一个同胞元素
    Element.nextSibling
    Element.nextElementSibling

    function prev(ele){
        return ele.nextElementSibling || e.nextSibling;  
    }

    // 节点的新增
    document.createElement()
    document.createTextNode()
    document.createAttribute()
    document.createComment()

    // 放父元素中
    parent.appendChild(node);
    parent.append(node|string);
    parent.prepend(node|string);

    // 放同级
    parent.insertBefore(newNode,oldNode);

    // 删除
    node.remove();
    parent.removeChild(node)

    // 修改
    parent.replaceChild(newNode,oldNode)

    // 克隆
    Element.cloneNode(true|false)


    // 元素节点的属性  
    //  元素节点 => 本质时一个对象 (存在修饰该元素(对象)的属性和方法)

    tagName  
    innerHTML
    innerText
    textContent
    outerHTML
    outerText

    className
    classList

    id 
    title  

    style




</script>
</html>